<template>
    <div class="screen">
        <div class="making">
            <div class="making-header">
                <div class="img">
                    <img :src="makingImg" alt width="30" height="30" />
                </div>
                <div class="title">制作中... Coming...</div>
            </div>
            <ul class="making-content">
                <li v-for="(item, index) in makingData" :key="index">{{item.mealId}}</li>
            </ul>
        </div>
        <div class="completed">
            <div class="completed-header">
                <div class="img">
                    <img :src="completedImg" alt width="30" height="30" />
                </div>
                <div class="title">请取餐... Serving...</div>
            </div>
            <ul class="completed-content">
                <li v-for="(item, index) in completedData" :key="index">
                    <span class="mealId-color">{{item.mealId}}</span>
                    - {{item.number}} 号取餐口
                </li>
            </ul>
        </div>
        <el-button @click="call">call</el-button>
    </div>
</template>

<script>
import completedImg from "@/assets/images/completed.svg";
import makingImg from "@/assets/images/making.svg";
window.getData = function(res) {
    let myEvent = new CustomEvent("getData", {
        detail: { res: res }
    });
    window.dispatchEvent(myEvent);
};

export default {
    data() {
        return {
            completedImg,
            makingImg,
            makingData: localStorage.getItem("makingData")
                ? JSON.parse(localStorage.getItem("makingData"))
                : [],
            completedData: localStorage.getItem("completedData")
                ? JSON.parse(localStorage.getItem("completedData"))
                : [],
            callTimer: null
        };
    },
    mounted() {
        window.addEventListener("getData", event => {
            let res = JSON.parse(event.detail.res);
            if (!res.topic.includes("claypot_instruction_")) return;
            if (!res.data.data) {
                res.data.data = {
                    waiting: [],
                    calling: [],
                    overtimeCall: []
                };
            }
            this.getData(res.data.data);
        });
    },
    methods: {
        getData(res) {
            let { waiting = [], overtimeCall = [], calling = [] } = res;

            let makingData = waiting.concat(overtimeCall);
            let arr = []
            for(let i = 0; i<makingData.length; i ++){
                let flag = false
                for(let j = 0;j < arr.length; j++){
                    if(arr[j].mealId === makingData[i].mealId){
                        flag = true
                    }
                }
                if(!flag) arr.push(makingData[i])
            }

            if(arr.length % 3 === 0){
                
            }else if(arr.length % 3 === 1){
                arr.push({mealId: '', number: ''}, {mealId: '', number: ''})
            }else if(arr.length % 3 === 2){
                arr.push({mealId: '', number: ''})
            }

            
            this.makingData = arr

            this.completedData = calling;

            localStorage.setItem("makingData", JSON.stringify(this.makingData));
            localStorage.setItem(
                "completedData",
                JSON.stringify(this.completedData)
            );

            let str1 = "";
            let str2 = "";
            this.completedData.forEach(item => {
                if (item.number === 1) {
                    str1 += item.mealId + "，";
                } else if (item.number === 2) {
                    str2 += item.mealId + "，";
                }
            });
            let str = "";
            if (str1) str += "请," + str1 + "到1号取餐口取餐。";
            if (str2) str += "请," + str2 + "到2号取餐口取餐。";
            // str = '你好'
            // this.$message.success(str);
            if (window.androidObj) {
                clearInterval(this.callTimer);
                window.androidObj.callSpeeck(str);
                this.callTimer = setInterval(() => {
                    window.androidObj.callSpeeck(str);
                }, 15000);
            }
            
        },
        call() {
            this.getData({
                waiting: [
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0158",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0106",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0107",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    }
                ],
                calling: [
                    {
                        number: 1,
                        mealId: "B0102",
                        detailId: "1205674969532854292",
                        qty: 3
                    },
                    {
                        number: 2,
                        mealId: "A0206",
                        detailId: "1205674969532854292",
                        qty: 3
                    }
                ],
                overtimeCall: [
                    {
                        number: 1,
                        mealId: "A0401",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    }
                ],
                deviceId: 1204291689871810562
            });
        }
    }
};
</script>

<style lang="less" scoped>
.screen {
    color: #fafafa;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 40px;
    & > div {
        padding: 0 40px;
    }
    .making {
        flex: 1;
        padding-left: 0;
        border-right: 2px dashed #ccc;
        .making-header {
            display: flex;
            align-items: center;
            background: #999;
            font-size: 40px;
            .img {
                padding: 20px;
                background: rgba(0, 0, 0, 0.1);
                margin-right: 40px;
            }
        }
        .making-content {
            font-size: 40px;
            color: #ccc;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            & > li {
                width: 200px;
                text-align: center;
                margin-top: 50px;
            }
            & > li:last-child {
                // margin-right: auto;
            }
        }
    }
    .completed {
        width: 37%;
        padding-right: 0;
        .completed-header {
            display: flex;
            align-items: center;
            background: #e3007e;
            font-size: 40px;
            .img {
                padding: 20px;
                background: rgba(0, 0, 0, 0.1);
                margin-right: 40px;
            }
        }
        .completed-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 52px;
            & > li {
                margin-top: 50px;
            }
            .mealId-color {
                color: yellow;
                // animation: changeColor 2s ease infinite;
            }
        }
    }
    @keyframes changeColor {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
}
</style>